<template>
  <div class="gyk-login">
    <div class="gyk-login-container">
      <!-- 登录框图标 -->
      <div class="gyk-login-container__loginImg">
        <img src="~@/assets/images/login-logo.png" />
      </div>
      <div class="gyk-login-container__loginTitle">
        <p class="gyk-login-container__loginTitle--mainTitle">贵永康大数据平台</p>
      </div>
      <!-- 登录表单 -->
      <div class="gyk-login-form-container">
        <el-form ref="gykLoginFormRef" :rules="loginRules" :model="loginForm" class="gyk-login-form" status-icon>
          <el-form-item prop="username">
            <template #label>
              <div class="gyk-login-form-container__label">
                <img src="~@/assets/images/login-user.png" />
                <span>用户名</span>
              </div>
            </template>
            <el-input v-model="loginForm.username" placeholder="请输入用户名" />
          </el-form-item>

          <el-form-item prop="password">
            <template #label>
              <div class="gyk-login-form-container__label">
                <img src="~@/assets/images/login-password.png" />
                <span>密码</span>
              </div>
            </template>
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
          </el-form-item>

          <el-form-item v-if="captchaEnabled" prop="code">
            <template #label>
              <div class="gyk-login-form-container__label">
                <img src="~@/assets/images/login-verify.png" />
                <span>验证码</span>
              </div>
            </template>
            <el-input v-model="loginForm.code" placeholder="请输入验证码" />
            <!-- 验证码图片 -->
            <img />
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">记住密码自动登录</el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button :loading="loginBtnLoading" type="primary" @click.native.prevent="submitLoginForm">
              <span v-if="!loginBtnLoading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { loginService } from '@gyk/gyk-api'
import Cookies from 'js-cookie'
import { stringUtils } from '@gyk/gyk-utils'

// 登录按钮是否在加载
const loginBtnLoading = ref(false)
// 表单对象
const gykLoginFormRef = ref()
// 表单校验
const loginRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入您的账号" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" }
  ],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
}

// 是否开启验证码
const captchaEnabled = ref(false)
// 验证码图片url
const codeUrl = ref<string>("")
type LoginForm = {
  username: string,
  password: string,
  code?: string,
  rememberMe?: boolean,
  uuid?: string,
}
const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
  code: '',
  rememberMe: false,
})
// 获取验证码
const getCode = () => {
  loginService.getCodeImg().then(res => {
    if (res.code == 200) {
      captchaEnabled.value = res.captchaEnabled
      if (captchaEnabled.value) {
        codeUrl.value = "data:image/gif;base64," + res.img;
        loginForm.uuid = res.uuid;
      }
    }
  })
}

const emit = defineEmits<{
  (e: "onSubmitLogin", loginForm: LoginForm): void
}>()

// 提交登录表单
const submitLoginForm = () => {
  gykLoginFormRef.value.validate((valid, fields) => {
    if (valid) { // 校验通过就提交表单
      loginBtnLoading.value = true
      if (loginForm.rememberMe) {
        Cookies.set("username", loginForm.username, { expires: 30 })
        Cookies.set("password", stringUtils.encrypt(loginForm.password), { expires: 30 })
        Cookies.set('rememberMe', loginForm.rememberMe, { expires: 30 })
      } else {
        Cookies.remove("username")
        Cookies.remove("password")
        Cookies.remove('rememberMe')
      }
      // 向外抛出登录的方法
      emit("onSubmitLogin", loginForm)
    }
  })
}

// 从cookie中获取用户登录信息
const getLoginFormByCookies = () => {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get('rememberMe')
  loginForm.username = username === undefined ? loginForm.username : username
  loginForm.password = password === undefined ? loginForm.password : stringUtils.decrypt(password)
  loginForm.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
}

const resetLoginForm = () => {
  loginForm.username = ""
  loginForm.password = ""
  loginForm.code = ""
  loginForm.uuid = ""
}

// 登录失败的方法
const loginError = () => {
  loginBtnLoading.value = false
  resetLoginForm()
  // 重新获取验证码
  getCode()
}

// 暴露给父组件使用
defineExpose({
  loginError,
})


// 调用获取验证码的方法
getCode()

// 从cookie中获取数据填充到输入框
getLoginFormByCookies()
</script>

<style lang="scss" scoped>
@include b(login) {
  @include bfc;
  background: url(@/assets/images/login-bg.png) no-repeat;
  background-position: 50%;
  background-size: cover;
  position: relative;

  @include b(login-container) {
    @include fcc;
    width: 473px;
    height: 646px;
    padding: 44px 60px;
    background-color: #FFF;
    border-radius: 10px;
    position: absolute;
    top: 140px;
    right: 190px;

    @include e(loginImg) {
      width: 70px;
      height: 70px;
    }

    @include e(loginTitle) {
      font-size: 21px;
      margin-top: 30px;

      @include m(mainTitle) {
        font-weight: 700;
      }
    }

    @include b(login-form-container) {
      width: 100%;
      margin-top: 30px;

      @include e(label) {
        display: flex;
        flex-direction: row;
        align-items: center;

        img {
          width: 14px;
          height: 14px;
          margin-right: 5px;
        }
      }
    }

    :deep(.el-form-item) {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    :deep(.el-form-item__content) {
      width: 100%;
    }

    :deep(.el-input__wrapper) {
      height: 42px;
      background-color: #ebeef9;
      border-radius: 6px;
      color: #000;
    }

    :deep(.el-button) {
      width: 100%;
      height: 42px;
      font-size: 20px;
    }
  }
}
</style>